<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="receiveData"
      :rules="rules"
      label-position="right"
      label-width="120px"
      label-suffix=":"
    >
      <div class="m-title">{{ $t('harvestLang.orderInfo') }}</div>
      <div class="m-info">
        <el-row :gutter="10">
          <el-col
            :span="8"
          >{{ $t("outboundOrderLang.logisticsDocumentNumber") + " : "
          }}{{ receiveData.trackingNo }}</el-col>
          <el-col
            :span="8"
          >{{ $t("harvestLang.logisticsProducts") + " : "
          }}{{ receiveData.channelName }}</el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col
            :span="8"
          >{{ $t("statusLang.orderStatus") + " : "
          }}{{ receiveData.orderStatusName }}</el-col>
          <el-col
            :span="8"
          >{{ $t("harvestLang.customerName") + " : "
          }}{{ receiveData.customerName }}</el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col
            :span="8"
          >{{ $t("warehouseEntryLang.managerPerson")
          }}{{ receiveData.handlePersonName }}</el-col>
        </el-row>
      </div>
      <div class="m-title" style="margin-top: 20px">
        {{ $t("outboundOrderLang.recipientInformation") }}
      </div>
      <div style="margin-top: 30px; margin-left: 20px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipient')"
              prop="receiveName"
            >
              <el-input
                v-model="receiveData.receiveName"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item
              :label="$t('outboundOrderLang.recipientCompany')"
              prop="receiveCompany"
            >
              <el-input
                v-model="receiveData.receiveCompany"
                clearable
                style="width: 707px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipientTaxNumber')"
              prop="receiveTax"
            >
              <el-input
                v-model="receiveData.receiveTax"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipientLicenseNumber')"
              prop="receiveIdCard"
            >
              <el-input
                v-model="receiveData.receiveIdCard"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipientEmail')"
              prop="receiveMail"
            >
              <el-input
                v-model="receiveData.receiveMail"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipientPhone')"
              prop="receiveTel"
            >
              <el-input
                v-model="receiveData.receiveTel"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipientMobilePhone')"
              prop="receiveTelMobile"
            >
              <el-input
                v-model="receiveData.receiveTelMobile"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="
                $t('outboundOrderLang.recipient') + $t('depotLang.postCode')
              "
              prop="receivePostCode"
            >
              <el-input
                v-model="receiveData.receivePostCode"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item
              :label="
                $t('outboundOrderLang.recipient') + $t('depotLang.country')
              "
              prop="receiveCountryId"
            >
              <el-select
                v-model="receiveData.receiveCountryId"
                clearable
                style="width: 270px"
              >
                <el-option
                  v-for="item in regionOptions"
                  :key="item.regionId"
                  :label="item.regionNameCn"
                  :value="item.regionId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="
                $t('outboundOrderLang.recipient') +
                  $t('depotLang.provinceStates')
              "
              prop="receiveProvince"
            >
              <el-input
                v-model="receiveData.receiveProvince"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="$t('outboundOrderLang.recipient') + $t('depotLang.city')"
              prop="receiveCity"
            >
              <el-input
                v-model="receiveData.receiveCity"
                clearable
                style="width: 270px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              :label="
                $t('outboundOrderLang.recipient') + $t('depotLang.address')
              "
              prop="receiveAddr"
            >
              <el-input
                v-model="receiveData.receiveAddr"
                type="textarea"
                :rows="3"
                clearable
                style="width: 1143px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              :label="$t('harvestLang.modifiedRemarks')"
              prop="remark"
            >
              <el-input
                v-model="receiveData.remark"
                type="textarea"
                :rows="3"
                clearable
                style="width: 1143px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getRegionList } from '@/api/region/region'

export default {
  props: {
    receiveData: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      rules: {
        receiveName: [{ required: true, message: this.$t('notNull') }],
        receiveTel: [{ required: true, message: this.$t('notNull') }],
        receiveTelMobile: [{ required: true, message: this.$t('notNull') }],
        receivePostCode: [{ required: true, message: this.$t('notNull') }],
        receiveCountryId: [{ required: true, message: this.$t('notNull') }],
        receiveProvince: [{ required: true, message: this.$t('notNull') }],
        receiveCity: [{ required: true, message: this.$t('notNull') }],
        receiveAddr: [{ required: true, message: this.$t('notNull') }],
        remark: [{ required: true, message: this.$t('notNull') }]
      },
      regionOptions: undefined
    }
  },
  created() {
    this.getRegionOptions()
  },
  methods: {
    getRegionOptions() {
      getRegionList({}).then((res) => {
        this.regionOptions = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.m-title {
  font-weight: Bold;
}

.m-info {
  margin-top: 20px;
  margin-left: 80px;
}

.m-info >>> .el-col {
  padding: 15px 0;
}

>>> .el-form-item__label {
  font-weight: normal;
}
</style>
